<template>
  <div>
    <el-page-header icon="" title="高校教学考试成绩管理系统">
      <template #content>
        <span class="text-large font-600 mr-3">首页</span>
      </template>
    </el-page-header>

    <el-card class="box-card">
      <el-row :gutter="5">
        <el-col :span="3">
          <el-avatar :size="100" :src="avatarUrl" />
        </el-col>
        <el-col :span="20">
          <div style="line-height: 50px">
            尊敬的<span style="font-weight: 600">{{ store.state.userInfo.name }}</span
            >{{ roleText }}用户，欢迎使用高校教学考试成绩管理系统，今天是{{ formatTime.getTime(new Date()) }}({{ formatTime.getDays(new Date()) }})
          </div>
          <div style="line-height: 50px">
            本周为
            <span style="color: blue">2024-2025学年第1学期</span>
            的第<span style="color: red; font-size: 32px">{{ formatTime.getNow() }}</span
            >个教学周
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
// import axios from 'axios'
// axios.get('/api/user/home').then((res) => {
//   console.log(res.data)
// })
import { useStore } from 'vuex'
import { computed } from 'vue'
import formatTime from '@/util/formatTime'
const store = useStore()
// console.log(store.state)
const roleText = computed(() => {
  if (store.state.userInfo.role === 1) {
    return '管理员'
  } else if (store.state.userInfo.role === 2) {
    return '教师'
  } else {
    return '学生'
  }
})
const avatarUrl = computed(() => (store.state.userInfo.avatar ? 'http://localhost:3000' + store.state.userInfo.avatar : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'))
</script>

<style lang="scss" scoped>
.el-card {
  margin-top: 50px;
}
</style>
